<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script th:src="@{/vue.js}"></script>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <td>id</td>
            <td>名称</td>
            <td>年龄</td>
            <td>电话</td>
            <td>地址</td>
            <td><a href="/add">新增</a></td>
        </tr>
        <tr v-for="type in pageData.records">
            <td v-text="type.id" v-model="id"></td>
            <td v-text="type.name" v-model="name"></td>
            <td v-text="type.age" v-model="age"></td>
            <td v-text="type.tel" v-model="tel"></td>
            <td v-text="type.address" v-model="address"></td>
            <td>
                <a :href="'/update?typeId='+type.id">修改</a>
                <a :href="'/delete?typeId='+type.id">删除</a>
            </td>
        </tr>



    </table>
    <div class="row" style="float:left;">
        <div class="col-md-12 col-md-offset-5 col-lg-offset-4col-xl-offset-5" >
            <ul class="pagination justify-content-center">
                <li><a href="" @click.prevent = "goPage(pageData.current-1)" >上一页</a></li>
                <li><a href="" v-for="num in pageData.pages" v-text="num" @click.prevent = "goPage(num)" >n</a></li>
                <li><a href="" @click.prevent = "goPage(pageData.current+1)">下一页</a></li>
            </ul>
        </div>
    </div>
</div>

<script>

    new Vue({
        el: "#app",
        data: {
            types: [],
            pageData: {
                current: 1,
                size: 3,
                total: -1,
                records: [],
                pages: -1
            },

            id:-1,
            name:"",
            age:0,
            tel:"",
            address:""



        },
        methods: {
            initPageData() {
                let vueObj = this;
                let params = {
                    currentPage: this.pageData.current,
                    pageSize: this.pageData.size,
                }
                $.get("/pageByType", params, function (data) {
                    console.log(data)
                    vueObj.pageData = data;
                })
            },
            goPage(pageNum) {
                if (pageNum < 1 || pageNum > this.pageData.pages || pageNum == this.pageData.current) {
                    console.log("无效pageNum " + pageNum);
                    return
                }

                this.pageData.current = pageNum;
                this.initPageData();
            }


        },
        created() {
            this.initPageData();
        }
    });


</script>

</body>
</html>